<script lang="ts" setup>
import { articleDetailRoute, articleDetailRRoute } from "@/router";
import { removeNewlines } from "@/utils";
import { useRefModel } from "@/utils/hooks";
import { bodyRows, isShowNextStory, isShowTopUp } from "@/config/ads_ids";
import i18n from "@/locales/i18n";
import { view_home_index } from "@/config/const_var";

defineOptions({
  name: "ArticleEllipsisBody",
});

let props = defineProps({
  content: {
    type: [String],
  },
  item: {
    type: [Object],
    default: () => ({}),
  },
  isShowReadMore: {
    type: [Boolean],
    default: false,
  },
  expandText: {
    type: [String],
    default: i18n.global.t("title07"),
  },
  handleExpand: {
    type: [Function],
    default: () => () => {},
  },
  bodyRows: {
    type: [String, Number],
    default: bodyRows.value,
  },
});
let emit = defineEmits([
  "update:isShowReadMore",
  "update:text",
  "update:expandText",
  "update:bodyRows",
]);
let isShowReadMore = useRefModel(props, "isShowReadMore", emit);
let content = useRefModel(props, "content", emit);
let expandText = useRefModel(props, "expandText", emit);
let item = useRefModel(props, "item", emit);
let body_rows = useRefModel(props, "bodyRows", emit);
let ellipsisRef = ref();
let router = useRouter();
let parser = new DOMParser();

function getInnerText(frament: string) {
  let doc = parser.parseFromString(frament, "text/html");
  return removeNewlines(doc.body.innerText);
}
// @ts-ignore
function getInnerHtml(frament: string) {
  let doc = parser.parseFromString(frament, "text/html");
  return doc.body.innerHTML;
}
// @ts-ignore
function getTextContent(frament: string) {
  let doc = parser.parseFromString(frament, "text/html");
  return doc.body.textContent;
}

function handleClickAction() {
  console.log("read more");
  SessionStorage.setItem(view_home_index, "-1");
  ellipsisRef.value.toggle(false);
  props.handleExpand();
  let currentPath = router.currentRoute.value.path;
  if (
    currentPath != articleDetailRoute.path &&
    currentPath != articleDetailRRoute.path
  ) {
    router.replace(articleDetailRoute.path + "?id=" + item.value.id);
    LocalStorage.setItem("currentPath", currentPath);
  }

  if (currentPath === articleDetailRoute.path) {
    router.replace(articleDetailRRoute.path + "?id=" + item.value.id);
  }

  if (currentPath === articleDetailRRoute.path) {
    router.replace(articleDetailRoute.path + "?id=" + item.value.id);
  }

  isShowTopUp.value = false;
  isShowNextStory.value = false;
}
let contentText = ref<string>(getInnerText(content.value));
let isShowComment = ref(false);
function set_textEllipsis() {
  ellipsisRef.value.toggle(true);
  ellipsisRef.value.$el.innerHTML = content.value;
  props.handleExpand();

  isShowComment.value = true;
  // @ts-ignore
  let loadCommentData = window.loadCommentData;
  loadCommentData && loadCommentData(false);
}
</script>
<template>
  <div class="article-content">
    <van-text-ellipsis
      :rows="body_rows"
      :content="contentText"
      :expand-text="expandText"
      @click-action="handleClickAction"
      ref="ellipsisRef"
    />
    <div
      v-show="isShowComment"
      class="comment-area"
      id="_boyuanComment"
      :data-id="item.id"
      data-channel="obnews"
      style="margin-top: 30px"
    ></div>
    <HomeReadMoreBtn
      v-if="isShowReadMore"
      @set_textEllipsis="set_textEllipsis"
    />
  </div>
</template>
<style lang="scss" scoped>
.article-content {
  color: #666666;
  position: relative;
  padding-bottom: v-bind("(isShowReadMore === true ? 20 : 10) + 'px'");
}
</style>
